<template>
  <div id="chart">
    <div v-show="!show">
      <el-empty description="暂时什么日志都没有呢，请先去创建并完成一个记录吧"></el-empty>
    </div>
    <div id="changeUnit">
      <el-link class="changeUnitButton"
               :class="{changeUnitButtonHover:unit==='w'}"
               @click="unit='w'"
               type="primary" :underline="false">周
      </el-link>
      <el-link class="changeUnitButton"
               :class="{changeUnitButtonHover:unit==='m'}"
               @click="unit='m'"
               type="primary" :underline="false">月
      </el-link>
    </div>
    <div v-show="show">
      <div id="container">
        <div v-for="(fun,i) in funs" :key=i :id="fun" class="container_item"></div>
      </div>
      <el-link id="to_top" v-show="show" type="primary" :underline="false" @click="toTop()">
        返<br>回<br>顶<br>部
      </el-link>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {countRecord, fun1, fun2, fun3, fun4} from "../util/request/record";
import {is_empty} from "../util/funcutils";

export default {
  name: "chart",
  mounted() {
    this.hasData()
  },
  watch: {
    unit() {
      this.query()
    }
  },
  data() {
    return {
      unit: 'w',
      funs: ['fun1', 'fun2', 'fun3', 'fun4'],
      show: false,
      option1: {
        color: ['rgba(211,83,240,0.9)', 'rgba(248,48,125,0.9)', 'rgba(255,130,61,0.9)'],
        title: {text: '每天开始结束时间图 (单位：小时)', left: '9%'},
        tooltip: {trigger: 'axis',},
        legend: {data: ['最早', '最晚', '学习时长'], x: 'center', y: 'top'},
        grid: {bottom: '4%', containLabel: true},
        xAxis: {type: 'category', boundaryGap: false,},
        yAxis: {type: 'value'},
        series: [
          {name: '最早', type: 'line', smooth: true, lineStyle: {width: 3}, data: []},
          {name: '最晚', type: 'line', smooth: true, lineStyle: {width: 3}, data: []},
          {name: '学习时长', type: 'line', smooth: true, lineStyle: {width: 3}, data: []}
        ]
      },
      option2: {
        title: {text: '科目学习时长图 (单位：分钟)', left: '9%'},
        color: [
          this.getColor('rgb(255, 191, 0)', 'rgb(224, 62, 76)'),
          this.getColor('rgb(128, 255, 165)', 'rgb(1, 191, 236)'),
          this.getColor('rgb(0, 221, 255)', 'rgb(77, 119, 255)'),
          this.getColor('rgb(255, 0, 135)', 'rgb(135, 0, 157)'),
          this.getColor('rgb(55, 162, 255)', 'rgb(116, 21, 219)'),
          this.getColor('rgba(0,255,255,.8)', 'rgba(255,0,255,.8)'),
        ],
        tooltip: {trigger: 'axis'},
        legend: {data: [], x: 'center', y: 'top'},
        grid: {bottom: '4%', containLabel: true},
        xAxis: [{type: 'category', boundaryGap: false, data: []}],
        yAxis: [{type: 'value'}],
        series: []
      },
      option3: {
        color: ['rgba(255,67,139,0.9)', 'rgba(249,121,47,0.8)', 'rgba(255,45,70,0.5)',
          'rgba(255,45,255,0.7)', 'rgba(33,216,255,0.8)', 'rgba(45,255,129,0.7)'],
        title: {text: '科目学习时长比例图 (单位：分钟)', left: '9%'},
        tooltip: {trigger: 'item', formatter: '{b} : {c}'},
        legend: {orient: 'vertical', x: 'left', y: 'center', left: '20%'},
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {borderRadius: 10, borderColor: 'rgba(249,219,158,0.8)', borderWidth: 1},
          emphasis: {label: {show: true, fontSize: '30', fontWeight: 'bold'}},
          label: {show: false, position: 'center'},
          data: []
        }]
      },
      option4: {
        color: this.getColor('#ff438b', 'rgb(249,165,47)'),
        title: {text: '科目学习时长排序图 (单位：分钟，数据为年度数据)', left: '9%'},
        tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
        grid: {bottom: '7%', containLabel: true},
        xAxis: {
          type: 'category', boundaryGap: true,
          data: [],

        },
        yAxis: {type: 'value', boundaryGap: [0, '100%']},
        dataZoom: [{type: 'inside', start: 0, end: 10}, {start: 0, end: 10}],
        series: [{type: 'bar', symbol: 'none', data: []}]
      }
    };
  },
  methods: {
    load(id, data) {
      let dom = this.$echarts.init(document.getElementById(id))
      dom.setOption(data)
    },
    getColor(c1, c2) {
      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: c1}, {offset: 1, color: c2}])
    },
    hasData() {
      this.query()
    },
    query() {
      countRecord({unit: this.unit})
        .then(res => {
          this.show = res.data.data > 0
          if (this.show) {
            this.fun1()
            this.fun2()
            this.fun3()
            if (is_empty(this.option4.series[0].data)) {
              this.fun4()
            }
          }
        })
    },
    fun1() {
      fun1({unit: this.unit})
        .then(res => {
          let data = res.data.data
          this.option1.xAxis.data = data.axis
          this.option1.series[0].data = data.data.map(item => {
            if (is_empty(item)) {
              return 0
            }
            return (item.kssj / 60).toFixed(2)
          })
          this.option1.series[1].data = data.data.map(item => {
            if (is_empty(item)) {
              return 0
            }
            return (item.jssj / 60).toFixed(2)
          })
          this.option1.series[2].data = data.data.map(item => {
            if (is_empty(item)) {
              return 0
            }
            return (item.duration / 60).toFixed(2)
          })
          this.load('fun1', this.option1)
        })
    },
    fun2() {
      fun2({unit: this.unit})
        .then(res => {
          let data = res.data.data
          this.option2.xAxis[0].data = data.axis
          this.option2.legend.data = data.kms

          for (let i = 0; i < data.kms.length; i++) {
            let km = data.kms[i]
            this.option2.series[i] = {
              name: km,
              type: 'line',
              smooth: true,
              lineStyle: {width: 3},
              data: data[km]
            }
          }
          this.load('fun2', this.option2)
        })
    },
    fun3() {
      fun3({unit: this.unit})
        .then(res => {
          let data = res.data.data
          data = data.map(item => {
            return {name: item.km, value: item.duration}
          })
          this.option3.series[0].data = data
          this.load('fun3', this.option3)
        })
    },
    fun4() {
      fun4({unit: 'y'})
        .then(res => {
          let data = res.data.data
          this.option4.xAxis.data = data.axis
          this.option4.series[0].data = data.data
          this.load('fun4', this.option4)
        })
    },
    toTop() {
      if (window.scrollY > 0) {
        window.scroll({top: 0, behavior: 'smooth'})
      }
    }
  }
}
</script>

<style scoped>
#changeUnit {
  position: fixed;
  top: 13%;
  right: 5%;
  z-index: 2000;
  display: flex;
  flex-wrap: nowrap;
  border: #409EFF 1px solid;
  border-radius: 5px;
}

.changeUnitButton {
  padding: 10px 15px;
}

.changeUnitButton:first-child {
  border-right: #409EFF 1px solid;
}

.changeUnitButton:last-child {
  border-left: #409EFF 1px solid;
}

.changeUnitButtonHover {
  background-color: #409EFF;
  color: white !important;
}

#to_top {
  position: fixed;
  top: 75%;
  right: 5%;
  border: #409EFF 1px solid;
  padding: 10px;
  border-radius: 5px;
}

#to_top:hover {
  background-color: #409EFF;
  color: white;
}

#container div {
  width: 1815px;
  height: 755px;
  border: lightgray 1px solid;
  border-radius: 10px;
  box-shadow: 2px 2px 10px lightgray;
  margin: 30px auto;
  padding: 20px;
}
</style>
